"""
@author: Gaoyaoxia
@date: 2020-08-21 18:03:56
"""
<!--  -->
<template>
  <div class="tagsForm">
    <a-modal
      class="tags-modal"
      title="标签管理"
      width="1150px"
      :visible="tagsVisible"
      @cancel="handleCancel"
    >
      <div class="tags-header">
        <i class="suncnui suncnui-icon-morenbiaoqian-01"></i>
        <span>默认兴趣标签</span>
      </div>
      <div class="tags-content">
        <div class="div-tags">
          <template v-for="tag in selectLabel">
            <a-tag
              :key="tag.id"
              :style="{fontSize: tag.length >= 6 ? '10px' : '16px'}"
              class="tag-default"
              :class="{'attention-tag':tag.isSelect === true}"
            >{{ tag.label}}</a-tag>
          </template>
        </div>
        <div class="tags-header">
          <i class="suncnui suncnui-icon-zidingyibiaoqian"></i>
          <span>自定义兴趣标签（最多6个）</span>
        </div>
        <div class="div-tags">
          <template v-for="(tag) in inputLabel">
            <a-badge :key="tag.id" class="tag-badge">
              <a-icon
                slot="count"
                :key="tag.id"
                type="close-circle"
                theme="filled"
                class="tag-icon"
                @click="handleClose(tag.id)"
              ></a-icon>
              <a-tag :key="tag.id" class="tag-add">{{ tag.label }}</a-tag>
            </a-badge>
          </template>

          <a-input
            v-if="inputVisible"
            ref="input"
            type="text"
            class="tag-input"
            :value="inputValue"
            @change="handleInputChange"
            @blur="handleInputConfirm($event)"
            @keyup.enter="handleInputConfirm($event)"
          />
          <a-tag class="tag-span-add" @click="showInput">添加标签</a-tag>
        </div>
      </div>
      <template slot="footer">
        <div class="tags-footer">
          <a-button class="submit-btn" type="primary" @click="submit()">确定</a-button>
          <a-button class="close-btn" @click="handleCancel()">关闭</a-button>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script>
export default {
  props: {
    tagsVisible: {
      type: Boolean,
      default: false,
    },
    saveTags: {
      type: Function,
      default: () => {},
    },
    closeTags: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      selectLabel: [
        { id: 1, label: "教育" },
        { id: 2, label: "教育" },
        { id: 3, label: "教育" },
        { id: 4, label: "教育" },
        { id: 5, label: "教育" },
        { id: 6, label: "教育" },
        { id: 7, label: "教育" },
        { id: 8, label: "教育" },
      ],
      inputLabel: [{ id: 1, label: "教育" }],
      //添加标签input显示
      inputVisible: false,
      inputValue: "",
      tagId: 2,
    };
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    handleCancel(e) {
      this.$emit("closeTags");
    },
    //删除标签事件
    handleClose(id) {},
    //添加标签自动获取input焦点
    showInput() {
      this.inputVisible = true;
      this.$nextTick(function () {
        this.$refs.input.focus();
      });
    },
    //添加标签inputchange事件
    handleInputChange(e) {
      this.inputValue = e.target.value;
    },
    //确认添加标签事件
    handleInputConfirm(e) {
      console.log(e);
      const inputValue = this.inputValue;
      if (inputValue === "") {
        this.$message.destroy();
        // this.$message.warning("输入内容不能为空");
        this.inputVisible = false;
        return;
      }
      this.inputLabel.push({ id: this.tagId++, label: this.inputValue });
      // var param = {
      //   isSelect: true,
      //   label: this.inputValue,
      //   sort: 0,
      //   type: 2,
      // };
      // saveLabelInput(param)
      //   .then((res) => {
      Object.assign(this, {
        inputVisible: false,
        inputValue: "",
      });
      //     this.$message.destroy();
      //     this.$message.success("添加成功");
      //     this.$emit("refreshLabelInput");
      //   })
      //   .catch((err) => {
      //     this.$message.destroy();
      //     this.$message.error(err);
      //   });
    },
    submit() {
      this.$emit("saveTags");
    },
  },
};
</script>
<style lang='stylus' scoped>
.tags-header
  line-height 16px
  span
    margin-left 5px
    font-size 16px
    color #535353
.tags-content
  .div-tags
    padding 28px 0px
    height 140px
    .tag-default
      border 0px
      margin-bottom 10px
    .tag-add
      background #18A8EB
      border 0px
      color #fff
      cursor pointer
      margin-bottom 10px
    .tag-input
      width 102px
      padding 8px
      margin 0px 8px
      border-radius 30px
      height 38px
      background #F5F5F5
      border 0px
      color #000
      text-align center
    .tag-span-add
      color #1694cf
      font-size 14px
      border 0px
      background #fff
      cursor pointer
    .tag-badge
      position relative
      margin-left 0
    .tag-badge >.tag-icon
      display none
    .tag-badge:hover >.tag-icon
      display block
      position absolute
      right 8%
      top 10%
      font-size 20px
      color #FF8B19
      background #fff
      border-radius 50%
    .attention-tag
      color #fff
      font-size 14px
      background #089dff
.tags-footer
  .submit-btn
    font-size 14px
    width 76px
    height 36px
    margin 0px 10px
    border 1px solid #1694CF
    background #1694CF
  .close-btn
    font-size 14px
    width 76px
    height 36px
    margin 0px 10px
    border 1px solid #1694CF
    color #1694CF
</style>